<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src="/vue.js"></script>
  <style>
    .big {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="root">
    <child n="'a'" :m="f" :x="101" class="big"></child>
  </div>
  <script>
    Vue.component('child', {
      inheritAttrs: false,
      props: {
        n: {
          type: [Number, String],
          required: true
        },
        m: {
          type: [Object],
          default: function() {return {}}
        },
        y: {
          type: Boolean,
          default: function() {
            return false
          }
        },
        x: {
          type: [Number],
          required: true,
          validator: function(value) {
            return value > 100
          }
        }
        
      },
      template: `
        <div>
          <div>{{n}} {{y}} {{x}}</div>
        </div>
      `,

      computed: {
        num() {
          return this.n * 100
        }
      },

      mounted() {
        console.log(this.m.x)
      },
    })

    var vm = new Vue({
      el: '#root',
      data: {
        f: {
          x: 0
        }
      }
    })
  </script>
</body>
</html>